<template>
  <div>
    <div class="water_six"></div>
  </div>
</template>

<script>
import "echarts-liquidfill";
import * as echarts from "echarts";
export default {
  mounted() {
    this.$nextTick(() => {
      this.waterBollSix();
    });
  },
  methods: {
    waterBollSix() {
      var chartDom = document.querySelector(".water_six");
      var myChart = echarts.init(chartDom);
      var option = {
        series: [
          {
            type: "liquidFill",
            data: [0.6],
            radius: "85%",
            outline: {
              show: false,
            },
            backgroundStyle: {
              borderColor: "#156ACF",
              borderWidth: 1,
              color: "blue",
              // shadowColor: "rgba(0, 0, 0, 0)",
              // shadowBlur: 20,
            },
            color: ["#0364F0"],

            itemStyle: {},
            outline: {
              show: true,
              borderDistance: 5,
              itemStyle: {
                color: "#42B9FA",
                borderColor: "#7294DA",
                borderWidth: 2,
                shadowBlur: 20,
                shadowColor: "rgba(39,69,129, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.water_six {
width: 100%;
height: 300px;
}
</style>